<script setup lang="ts">
import { EVirtualList } from 'exploria-ui';

const data = Array.from({ length: 6 }, (_, index) => {
    return {
        rowKey: index.toString(),
        name: 'name' + index,
    };
});

interface Row {
    rowKey: string;
    name: string;
}
</script>

<template>
    <EVirtualList :data="data" :container-height="150" :item-height="30">
        <template #row="{ row }: { row: Row }">
            <div class="list-item">{{ row.name }}</div>
        </template>
    </EVirtualList>
</template>

<style scoped lang="scss">
.e-virtual-list {
    .list-item {
        height: 100%;
        background-color: #99bef6;
    }
}
</style>
